import { View, Button } from "@tarojs/components";
import {
  AtSearchBar,
  AtCard,
  AtList,
  AtListItem,
  AtFloatLayout,
  AtTabBar,
  AtButton,
  AtModal,
  AtModalHeader,
  AtModalContent,
  AtModalAction,
  AtIcon
} from "taro-ui";
import Taro from "@tarojs/taro";
import { useState, useRef, useEffect } from "react";
import "./index.scss";

const cosmeticg = () => {
  const [value, setValue] = useState("");
  const [isOpen, setIsOpen] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [List, setList] = useState([
    1,
    2,
    3,
    1,
    2,
    3,
    1,
    2,
    3,
    1,
    2,
    3,
    1,
    2,
    3
  ]);

  useEffect(() => {}, []);

  const handleChange = val => {
    setValue(val);
  };

  const handleCpClick = () => {
    Taro.navigateTo({
      url: "../turnover/index"
    });
  };

  const handleIntoPackageClick = () => {
    Taro.navigateTo({
      url: "../intopackage/index"
    });
  };

  const handleCamera = () => {
    Taro.scanCode({
      success: res => {
        console.log(res);
      }
    });
  };

  return (
    <View className="cosmeticg">
      <View
        className="at-row search at-row__align--center"
        style="background:#fff;"
      >
        <View className="at-col at-col-11">
          <AtSearchBar value={value} onChange={handleChange} />
        </View>
        <View className="at-col at-col-1">
          <AtIcon
            onClick={handleCamera}
            value="camera"
            size="28"
            color="#3c3c3c"
          ></AtIcon>
        </View>
      </View>
      <View className="safe-area" style="margin-top: 42px;">
        <AtList className=" ">
          {List.map(item => (
            <AtListItem
              onClick={() => setIsOpen(!isOpen)}
              title="标题文字"
              note="描述信息"
              arrow="right"
              thumb="http://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png"
            />
          ))}
        </AtList>
      </View>
      <AtFloatLayout
        isOpened={isOpen}
        title="这是个标题"
        onClose={() => setIsOpen(false)}
      >
        <View className="list">
          <View style="margin-bottom:90rpx">
            {List.map(item => (
              <AtCard
                onClick={handleCpClick}
                className="mx-0"
                note="小Tips"
                extra="额外信息"
                title="这是个标题"
                thumb="http://www.logoquan.com/upload/list/20180421/logoquan15259400209.PNG"
              >
                这也是内容区 可以随意定义功能
              </AtCard>
            ))}
          </View>
          <AtTabBar fixed tabList={[]} onClick={() => {}} current={0} />
          <View
            className="at-tab-bar--fixed"
            style="padding-left:10px;padding-right:10px;"
          >
            <View className="at-row">
              <AtButton
                type="primary"
                className="at-col at-col-6"
                onClick={handleIntoPackageClick}
              >
                入包
              </AtButton>
              <AtButton
                type="secondary"
                className="at-col at-col-6"
                onClick={() => setIsModalOpen(true)}
              >
                一键出包
              </AtButton>
            </View>
          </View>
        </View>
      </AtFloatLayout>
      <AtModal isOpened={isModalOpen}>
        <AtModalHeader>标题</AtModalHeader>
        <AtModalContent>
          这里是正文内容，欢迎加入京东凹凸实验室
          这里是正文内容，欢迎加入京东凹凸实验室
          这里是正文内容，欢迎加入京东凹凸实验室
        </AtModalContent>
        <AtModalAction>
          {" "}
          <Button onClick={() => setIsModalOpen(false)}>取消</Button>{" "}
          <Button onClick={() => setIsModalOpen(false)}>确定</Button>{" "}
        </AtModalAction>
      </AtModal>
    </View>
  );
};

export default cosmeticg;
